<template>
	<view class="w-100">
		<view class="flex-1 bg-white py-2">
			<view class="flex-1 mx-5">
				<view class="py-3 font-s-4 font-w">提现方式</view>
				<view class="flex-1 row-ac-sb py-2" @click="tapWechat" v-if="distributDetail.is_wechat">
					<view class="row-ac">
						<view class="iconfont icon-weixinzhifu2"></view>
						<view class="ml-4">微信</view>
					</view>
					<view class="take-box row" :class="{ active: wechat_status ==true }">
						<view class="selected"></view>
					</view>
				</view>
				<view class="flex-1 row-ac-sb py-2" @click="tapAlipay" v-if="distributDetail.is_alipay">
					<view class="row-ac">
						<view class="iconfont icon-zhifubaozhifu"></view>
						<view class="ml-4">支付宝</view>
					</view>
					<view class="take-box row" :class="{ active: alipay_status ==true }">
						<view class="selected"></view>
					</view>
				</view>
				<view class="flex-1 row-ac-sb py-2" @click="tapBank" v-if="distributDetail.is_bank">
					<view class="row-ac">
						<view class="iconfont icon-name-card"></view>
						<view class="ml-2">银行卡</view>
					</view>
					<view class="take-box row" :class="{ active: bank_status ==true }">
						<view class="selected"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex-1 mt-3 bg-white py-2">
			<view class="flex-1 mx-5">
				<view class="font-s-35">可提现余额: {{ usersbalance.user_balance }}元</view>
				<view class="py-2 mt-1 border-bottom flex-1 row-ac">
					<view class="font-s-8 font-w">￥</view>
					<view class="flex-1 font-s-9 font-w amount-box row-ac ml-2" v-if="form.amount !== ''"
						:class="warnState ==true ? 'text-danger' : ''">
						{{ form.amount }}<text class="font-s-4 ml-1" v-if="warnState">(提现金额大于余额)</text>
					</view>
					<view class="flex-1 font-s-45 amount-box row-ac ml-2 text-light-muted" v-else>选择提现金额</view>
				</view>
				<view class="py-2 mt-1 flex-1 row-ac-sb">
					<view class="">
						<view class="font-s-4">提现手续费</view>
						<view class="text-muted font-s-3">预计到账时间</view>
					</view>
					<view class="">
						<view class="font-s-4">{{ withdrawalFee }}元</view>
						<view class="text-muted font-s-3">24小时内到账</view>
					</view>
				</view>
				<view class="flex-1 mt03">
					<view class="py-3 font-s-4 font-w">提现金额</view>
					<view class="flex-1 row-ac-fw">
						<view class="money-box row mb-4" v-for="(item,index) in amountList" :key="index"
							@tap="tapMoney(item, index)" :class="{ moneyactive: moneyIndex == index }">
							{{ item.moneyNum }} 元
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="mt-5 row">
			<view class="submit-box row" @click="submitForm">提交</view>
		</view>
	</view>
</template>

<script>
	import {
		userInfoUrl,
		usersbalanceUrl,
		withdrawalDetailUrl,
	} from '@/api/index.js';
	import {
		commissionstatsUrl,
		distributiondataCreateUrl,
		distributorssettingsDetailUrl
	} from '@/api/promotion';
	export default {
		data() {
			return {
				userInfo: '',
				usersbalance: '',
				userCommission: '',
				warnState: false,
				form: {
					types: 3,
					amount: '',
					withdrawal_method: 1,
					actual_amount: '',
				},
				amountList: [{
						id: 1,
						moneyNum: 1
					},
					{
						id: 2,
						moneyNum: 5
					},
					{
						id: 3,
						moneyNum: 10
					},
					{
						id: 4,
						moneyNum: 20
					},
					{
						id: 5,
						moneyNum: 50
					},
					{
						id: 6,
						moneyNum: 100
					}
				],
				distributDetail: '',
				wechat_status: false,
				alipay_status: true,
				bank_status: false,
				moneyIndex: ''
			}
		},
		filters: {
			moneyFilter(val) {
				return (val / 10000).toFixed(4);
			}
		},
		mounted() {
			this.token = uni.getStorageSync('token')
			if (this.token != '') {
				this.loginStatus = true
				this.getUserInfo()
				this.getUsersbalance()
			} else {
				this.loginStatus = false
			}
			this.getDistributorssettingsDetail()
			this.getWithdrawalDetail()
		},
		computed: {
			withdrawalFee() {
				const amount = parseFloat(this.form.amount);
				if (isNaN(amount)) {
					return '0.00';
				} else {
					const fee = amount * (this.distributDetail.commission / 100); // 手续费为提现金额乘以动态手续费的百分比
					return fee.toFixed(2);
				}
			},
		},
		methods: {
			getUserInfo() {
				this.$R.get(userInfoUrl).then(res => {
					this.userInfo = res.data
					this.getCommissionstats(this.userInfo.id)
				})
			},
			getUsersbalance() {
				this.$R.get(usersbalanceUrl, ).then(res => {
					this.usersbalance = res.data
				})
			},
			getWithdrawalDetail() {
				this.$R.get(withdrawalDetailUrl).then(res => {
					this.withdrawal = res.data
					console.log(this.withdrawal);
					if(this.form.withdrawal_method = 1){
						if(this.withdrawal.alipay_account == null ){
							uni.showModal({
								title: '提示',
								content: '未设置支付宝账户，是否前往设置',
								success: function (res) {
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages/user/partner/distribution/distribution-set',
										});
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}
					}
				})
			},
			getDistributorssettingsDetail() {
				this.$R.get(distributorssettingsDetailUrl + 1 + '/').then(res => {
					this.distributDetail = res.data
				})
			},
			getCommissionstats(userId) {
				this.$R.get(commissionstatsUrl + userId + '/').then(res => {
					this.userCommission = res.data
				})
			},
			tapWechat() {
				this.form.withdrawal_method = 0
				this.wechat_status = true
				this.alipay_status = false
				this.bank_status = false
			},
			tapAlipay() {
				this.form.withdrawal_method = 1
				this.wechat_status = false
				this.alipay_status = true
				this.bank_status = false
				if(this.withdrawal.alipay_account == null ){
					uni.showModal({
						title: '提示',
						content: '未设置支付宝账户，是否前往设置',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/user/partner/distribution/distribution-set',
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			tapBank() {
				this.form.withdrawal_method = 2
				this.wechat_status = false
				this.alipay_status = false
				this.bank_status = true
				if(this.withdrawal.bank_account == null ){
					uni.showModal({
						title: '提示',
						content: '未设置银行账户，是否前往设置',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/user/partner/distribution/distribution-set',
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			calculateActualAmount() {
				const amount = parseFloat(this.form.amount);
				const fee = parseFloat(this.withdrawalFee);
				if (isNaN(amount) || isNaN(fee)) {
					return '0.00';
				} else {
					const actual = amount - fee;
					return actual.toFixed(2);
				}
			},
			tapMoney(item, index) {
				this.moneyIndex = index
				this.form.amount = item.moneyNum
				if (this.form.amount > this.usersbalance.user_balance) {
					this.warnState = true
				} else {
					this.warnState = false
				}

			},
			submitForm() {
				this.form.actual_amount = this.calculateActualAmount();
				console.log(this.calculateActualAmount());
				this.$R.post(distributiondataCreateUrl, this.form).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '申请成功',
							icon: 'none'
						});
						this.form.amount = ''
						this.getUsersbalance()
					} else if (res.code == 400) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.icon-weixinzhifu2 {
		font-size: 68rpx;
		color: #009500;
	}

	.icon-zhifubaozhifu {
		font-size: 68rpx;
		color: #0B91EA;
	}

	.icon-name-card {
		font-size: 68rpx;
		color: #EA660B;
	}

	.take-box {
		width: 33rpx;
		height: 33rpx;
		border-radius: 50%;
		border: 3rpx solid #D7D7D7;

		.selected {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background-color: #fff;
		}
	}

	.active {
		border: 3rpx solid #EA660B !important;
	}

	.active .selected {
		background-color: #EA660B;
	}

	.submit-box {
		width: 368rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #EA660B;
		color: #fff;
	}

	.money-box {
		width: 30%;
		height: 86rpx;
		background-color: #f8f8f8;
		border-radius: 12rpx;
		margin-right: 5%;

		&:nth-child(3n) {
			margin-right: 0;
		}
	}

	.moneyactive {
		background-color: #EA660B !important;
		color: #fff;
	}

	.amount-box {
		height: 86rpx;
	}
</style>